<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI翻译</title>
    <style>
        /* 样式优化 */
        body {
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
            font-family: Arial, sans-serif;
        }
        
        textarea {
            padding: 12px;
            margin: 10px 0;
            width: 100%;
            height: 150px;
            resize: vertical;
            font-family: inherit;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .controls {
            margin: 15px 0;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        select {
            padding: 8px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }

        button {
            padding: 8px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .error {
            color: #dc3545;
            margin-top: 10px;
        }

        .loading {
            display: none;
            margin-left: 10px;
            color: #666;
        }
    </style>
</head>

<body>
    <h1>AI翻译助手</h1>
    <textarea id="inputText" placeholder="请输入需要翻译的内容"></textarea>
    <div class="controls">
        <select id="sourceLanguage">
            <option value="zh">中文</option>
            <option value="en">英文</option>
        </select>
        <span>翻译为</span>
        <select id="targetLanguage">
            <option value="en">英文</option>
            <option value="zh">中文</option>
        </select>
        <button id="sendButton">翻译</button>
        <span id="loading" class="loading">翻译中...</span>
    </div>
    <div id="error" class="error"></div>
    <textarea id="responseText" readonly placeholder="翻译结果将显示在这里"></textarea>

    <script>
        const inputText = document.getElementById('inputText');
        const sendButton = document.getElementById('sendButton');
        const responseText = document.getElementById('responseText');
        const sourceLanguage = document.getElementById('sourceLanguage');
        const targetLanguage = document.getElementById('targetLanguage');
        const loading = document.getElementById('loading');
        const error = document.getElementById('error');

        sendButton.onclick = async function () {
            // 输入验证
            if (!inputText.value.trim()) {
                error.textContent = '请输入需要翻译的内容';
                return;
            }

            // 重置状态
            error.textContent = '';
            responseText.value = '';
            loading.style.display = 'inline';
            sendButton.disabled = true;

            try {
                const response = await fetch('/ai-translator/chatTranslations', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: `text=${encodeURIComponent(inputText.value.trim())}&source=${sourceLanguage.value}&target=${targetLanguage.value}`
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                if (data.error) {
                    throw new Error(data.error);
                }

                responseText.value = data.data;
            } catch (err) {
                error.textContent = `翻译失败: ${err.message}`;
                responseText.value = '';
            } finally {
                loading.style.display = 'none';
                sendButton.disabled = false;
            }
        }

        // 添加键盘快捷键支持
        inputText.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 'Enter') {
                sendButton.click();
            }
        });
    </script>
</body>

</html>
